<template>
  <div class="body" :class="isShowLuck ? 'hidden' : ''">
    <div class="bg-content" v-if="!isShowLottery">
      >
      <div class="start-center-box">
        <img class="title" src="../../assets/images/title.png" alt="" />
        <img
          v-if="!isShowStart"
          class="time"
          src="../../assets/images/activity-time.png"
        />
        <img v-else class="start" src="../../assets/images/start.png" />
        <img class="location" src="../../assets/images/activity-location.png" />
        <img class="logo" src="../../assets/images/logo.png" />
      </div>
    </div>
    <div
      class="lottery-box"
      v-if="isShowLottery"
      :class="isShowLuck ? 'filter' : ''"
    >
      <img
        class="box-bg"
        src="../../assets/images/lottery/box-bg.png"
        alt=""
        srcset=""
      />
      <div class="box">
        <div
          @click="getUserMessage"
          class="list"
          :class="drawIndex > 0 ? 'grey' : ''"
        ></div>

        <div
          v-for="item in prizeList"
          class="list"
          :class="drawIndex == item.index ? 'change_in' : ''"
          :key="item.id"
        >
          <div
            class="list_t"
            :class="
              item.index === 3 || item.index === 6 || item.index === 8
                ? 'text'
                : ''
            "
          >
            <img :src="item.imgsrc" />
          </div>
        </div>
      </div>
    </div>
    <div class="luck-display" v-if="isShowLuck">
      <div class="tip-popup">
        <div class="tip-content" v-if="!isShowFrom">
          <div class="tip-message">
            <img
              class="no-prize"
              v-if="prizeResult === 3 || prizeResult === 6 || prizeResult === 8"
              src="../../assets/images/lottery/no-prize-tip.png"
            />
            <img
              v-else
              class="submit-success"
              src="../../assets/images/lottery/submit-tip.png"
            />
          </div>
          <a
            href="https://yunqi.aliyun.com/2021/agenda/session203?spm=5176.23948577a2c4e.J_6988780170.14.1406379830vEoR"
            ><img
              class="return-btn"
              src="../../assets/images/lottery/return.png"
          /></a>

          <img
            class="more-btn"
            src="../../assets/images/lottery/more-btn.png"
          />
        </div>
        <div class="from-content" v-if="isShowFrom">
          <img
            class="form-bg"
            src="../../assets/images/lottery/form/form-bg.png"
            alt=""
          />
          <div class="center-box">
            <div class="left-prize">
              <img
                style="width: 248px; height: 64.8px"
                src="../../assets/images/lottery/form/congratulations.png"
                alt=""
              />
              <img
                style="width: 280px; height: 24.8px"
                src="../../assets/images/lottery/form/tip.png"
                alt=""
              />
              <div class="prize-box">
                <!-- <img :src="awardImage" alt="" /> -->
                <img
                  src="../../assets/images/lottery/prize-1-1.png"
                  v-if="prizeName === '奖品1'"
                />
                <img
                  src="../../assets/images/lottery/prize-1-2.png"
                  v-if="prizeName === '奖品2'"
                />
                <img
                  src="../../assets/images/lottery/prize-1-3.png"
                  v-if="prizeName === '奖品3'"
                />
              </div>
            </div>
            <div class="form">
              <div class="form-item">
                <div class="lable">
                  <img src="../../assets/images/lottery/lable-1.png" alt="" />
                </div>
                <div class="form-item-input">
                  <input type="text" v-model="form.name" />
                </div>
              </div>
              <div class="form-item">
                <div class="lable">
                  <img src="../../assets/images/lottery/lable-2.png" alt="" />
                </div>
                <div class="form-item-input">
                  <input type="text" v-model="form.phone" />
                </div>
              </div>
              <div class="form-item textarea">
                <div class="lable">
                  <img src="../../assets/images/lottery/lable-3.png" alt="" />
                </div>
                <div class="form-item-input textarea">
                  <textarea
                    rows="3"
                    cols="20"
                    v-model="form.address"
                  ></textarea>
                </div>
              </div>
              <div class="bottom">
                <div class="statement-box">
                  <img
                    class="statement"
                    src="../../assets/images/lottery/word.png"
                    alt=""
                  />
                  <a
                    href="https://www.intel.cn/content/www/cn/zh/legal/terms-of-use.html"
                    target="_blank"
                    ><img
                      class="link1"
                      src="../../assets/images/lottery/link1.png"
                      alt=""
                  /></a>
                  <a
                    href="https://www.intel.cn/content/www/cn/zh/privacy/intel-privacy-notice.html"
                    target="_blank"
                    ><img
                      class="link2"
                      src="../../assets/images/lottery/link2.png"
                      alt=""
                  /></a>
                </div>
                <div class="btn-box">
                  <img
                    @click="submit"
                    class="agree"
                    src="../../assets/images/lottery/form/agree.png"
                    alt=""
                  />
                  <a
                    href="https://yunqi.aliyun.com/2021/agenda/session203?spm=5176.23948577a2c4e.J_6988780170.14.1406379830vEoR"
                  >
                    <img
                      class="abandon"
                      @click="giveUp"
                      src="../../assets/images/lottery/form/abandon.png"
                      alt=""
                  /></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
let loopTimer;
let timer;
let onDrawing = false; // 是否可进行抽奖标识，默认为false可进行抽奖
let drawIndex = 0; //抽奖过程KEY
import { draw, getUser } from "../../api/index.js";
export default {
  name: "activityIndex",
  data() {
    return {
      user_id: null,
      form: {
        name: "",
        phone: "",
        address: "",
      },
      drawIndex: null, //抽奖过程KEY
      prizeResult: null, //抽奖结果KEY
      prizeName: "奖品1", //抽奖结果KEY对应的奖品名称
      isShowLuck: false, // 是否显示奖品弹窗，默认false不显示
      showAgain: false, //是否抽奖后显示再抽一次按钮
      awardImage: "", // 弹窗展示的奖品照片
      awardName: "", // 弹窗展示的奖品名字
      time: null,
      isShowFrom: false, //控制显示的是提示框还是表单弹框
      isShowLottery: false, //是否显示抽奖页面活动在 10-19 16:30显示抽奖的页面
      isShowStart: false, //在10-19 13：30-16：30之间显示即将开始的按钮
      prizeList: [
        {
          id: "001",
          index: 1,
          imgsrc: require("../../assets/images/lottery/prizes1.png"),
          prizeName: "奖品1",
        },
        {
          id: "002",
          index: 2,
          imgsrc: require("../../assets/images/lottery/prizes2.png"),
          prizeName: "奖品2",
        },
        {
          id: "003",
          index: 3,
          imgsrc: require("../../assets/images/lottery/no-prizes.png"),
          prizeName: "谢谢参与",
        },
        {
          id: "004",
          index: 4,
          imgsrc: require("../../assets/images/lottery/prizes3.png"),
          prizeName: "奖品3",
        },
        {
          id: "005",
          index: 5,
          imgsrc: require("../../assets/images/lottery/prizes1.png"),
          prizeName: "奖品1",
        },
        {
          id: "006",
          index: 6,
          imgsrc: require("../../assets/images/lottery/no-prizes.png"),
          prizeName: "谢谢参与",
        },
        {
          id: "007",
          index: 7,
          imgsrc: require("../../assets/images/lottery/prizes2.png"),
          prizeName: "奖品2",
        },
        {
          id: "008",
          index: 8,
          imgsrc: require("../../assets/images/lottery/no-prizes.png"),
          prizeName: "谢谢参与",
        },
      ],
    };
  },
  mounted() {
    const user_id = this.$route.query.token;
    const test = this.$route.query.test;
    const giveUp = localStorage.getItem("giveUp");
    if(test){
      this.isShowStart =true
    }
    if (user_id) {
      localStorage.setItem("user_id", user_id);
      this.user_id = user_id;
      this.contrastDate();
      if (giveUp) {
      } else {
        this.getUserDraw();
      }
    } else {
      console.log("用户id为空", user_id);
    }
  },
  methods: {
    getUserDraw() {
      getUser({
        user_id: this.user_id,
      }).then((res) => {
        if (res.data.user.draw !== -1) {
          if (
            res.data.user.draw !== 2 &&
            res.data.user.draw !== 5 &&
            res.data.user.draw !== 7
          ) {
            if (res.data.user.phone !== null) {
            } else {
              this.prizeResult = res.data.user.draw;
              this.prizeName = this.prizeList[this.prizeResult].prizeName;
              this.awardImage = this.prizeList[this.prizeResult].imgsrc;
              this.isShowLuck = true;
              this.isShowFrom = true;
            }
          }
        }
      });
    },
    getUserMessage() {
      if (this.user_id === null) {
        return;
      }
      getUser({
        user_id: this.user_id,
      }).then((res) => {
        if (res.data.user.draw === -1) {
          onDrawing = false;
          this.startDraw();
        } else {
          onDrawing = true;
          this.$message.destroy();
          this.$message.error("您已经抽过奖了！");
        }
      });
    },
    submit() {
      let tipMessage = "";
      if (this.form.name === "") {
        tipMessage = "请填写收件人";
      } else if (this.form.phone === "") {
        tipMessage = "请填写联系电话";
      } else if (this.form.address === "") {
        tipMessage = "请填写收货地址";
      }
      if (
        this.form.name !== "" &&
        this.form.phone !== "" &&
        this.form.address !== ""
      ) {
        draw({
          user_id: this.user_id,
          username: this.form.name,
          address: this.form.address,
          phone: this.form.phone,
        }).then((res) => {
          if (res.data.code === 1) {
            this.isShowFrom = false;
          }
        });
      } else {
        this.$message.error(tipMessage);
      }
    },
    giveUp() {
      this.isShowLuck = false;
      this.isShowFrom = false;
      localStorage.setItem("giveUp", 1);
    },
    contrastDate() {
      this.time = setInterval(() => {
        if (this.isShowLottery) {
          clearInterval(this.time);
        } else {
          console.log(moment().format("YYYY-MM-DD HH:mm:ss"));
          var startTime = "2021-10-19 13:30:00";
          var endTime = "2021-10-19 16:30:00";
          let isShowStart = moment(startTime).isBefore(); //false
          let isShowLottery = moment(endTime).isBefore(); //false
          if (isShowStart) {
            this.isShowStart = isShowStart;
          }
          if (isShowLottery) {
            this.isShowLottery = isShowLottery;
            clearInterval(this.time);
          }
        }
      }, 1000);
    },
    startDraw() {
      //this.againBtn();
      if (onDrawing) {
        return;
      } else {
        onDrawing = true;
      }

      clearInterval(loopTimer);
      clearTimeout(timer);
      loopTimer = setInterval(() => {
        this.changePrize();
      }, 100);
      draw({
        user_id: this.user_id,
      }).then((result) => {
        let random = result.data.user.draw;
        let res = {
          stutus: 1,
          prizeResult: this.prizeList[random].index,
          prizeName: this.prizeList[random].prizeName,
        };
        if (res.stutus == 1) {
          timer = setTimeout(() => {
            clearInterval(loopTimer);
            loopTimer = setInterval(() => {
              this.changePrize();
            }, 100);

            timer = setTimeout(() => {
              clearInterval(loopTimer);
              loopTimer = setInterval(() => {
                this.changePrize();
              }, 150);

              timer = setTimeout(() => {
                clearInterval(loopTimer);
                loopTimer = setInterval(() => {
                  this.changePrize();
                }, 400);

                timer = setTimeout(() => {
                  this.prizeResult = res.prizeResult;
                  this.prizeName = res.prizeName;
                  // if (
                  //   this.prizeResult === 3 ||
                  //   this.prizeResult === 6 ||
                  //   this.prizeResult === 8
                  // ) {
                  //   this.isShowFrom = false;
                  // } else {
                  //   this.isShowFrom = true;
                  // }
                }, 1200);
              }, 1200);
            }, 1500);
          }, 1600);
        }
      });
      // 随机将品池
      //let random = Math.floor(Math.random() * this.prizeList.length);
    },
    //抽奖过程奖品切换
    changePrize() {
      drawIndex++;
      drawIndex = drawIndex > 8 ? 1 : drawIndex;

      this.drawIndex = drawIndex;
      if (this.prizeResult == drawIndex) {
        clearInterval(loopTimer);
        clearTimeout(timer);
        let currentAward = this.prizeList[this.prizeResult - 1];
        this.showAgain = true;
        this.awardImage = currentAward.imgsrc;
        this.awardName = currentAward.prizeName;
        setTimeout(() => {
          this.isShowLuck = true
          if (
            this.prizeResult === 3 ||
            this.prizeResult === 6 ||
            this.prizeResult === 8
          ) {
            this.isShowFrom = false
          } else {
            this.isShowFrom = true
          }
        }, 800)
      }
    },
    // 关闭奖品弹簧
    closePopup() {
      this.isShowLuck = false;
    },
    //点击再抽一次按钮
    againBtn() {
      onDrawing = false;
      drawIndex = 0; //抽奖过程KEY
      this.drawIndex = null;
      this.prizeResult = null;
      this.prizeName = null;
      this.showAgain = false;
      this.awardImage = "";
      this.awardName = "";
      this.isShowFrom = false;
    },
  },
};
</script>

<style lang="stylus" scoped>
.statement-box {
  text-align: left;
}

.link1 {
  margin-right: 15px;
  width: 54px;
  height: 13.6px;
  margin-top: -10px;
}

.link2 {
  margin-left: -13px;
  width: 66px;
  height: 13.6px;
  margin-top: -10px;
}

.start-center-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // display: flex;
  // justify-content: space-between;
  padding: 0 110px;
  overflow: auto;
}

.center-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 1053px;
  /* height: 79%; */
  display: flex;
  justify-content: space-between;
  padding: 0px 95px 0 30px;
  overflow: auto;
  /* margin: 0 auto; */
  left: 50%;
  transform: translate(-50%, 0);
}

.statement {
  width: 409px;
  height: 65px;
}

.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.agree {
  width: 203px;
  cursor: pointer;
}

.abandon {
  width: 203px;
  cursor: pointer;
}

.form {
  width: 430px;
  text-align: center;
  margin-top: 53px;
}

.form-item {
  margin-bottom: 10px;

  .lable {
    display: block;
    font-size: 24px;
    font-family: Intel Clear Hans;
    font-weight: 400;
    color: #FFFFFF;
    text-align: left;
    margin-bottom: 5px;

    img {
      width: 103px;
      height: 22px;
    }
  }

  input {
    width: 100%;
    height: 43px;
    background: url('../../assets/images/lottery/form/input-bg.png');
    background-size: 100% 100%;
    padding: 0 35px;
    outline: none;
    border: none;
    line-height: 43px;
    color: #FFFFFF;
    font-size: 24px;
  }

  textarea {
    width: 100%;
    height: 109px;
    padding: 10px 30px 10px 20px;
    box-sizing: border-box;
    outline: none;
    border: none;
    font-size: 24px;
    color: #FFFFFF;
    background: transparent;
  }

  .textarea {
    background: url('../../assets/images/lottery/form/address-bg.png');
    background-size: 100% 100%;
  }
}

.left-prize {
  width: 430px;
  text-align: center;
  margin-top: 50px;
}

.prize-box {
  width: 80%;
  height: 258px;
  background: url('../../assets/images/lottery/form/prizes-bg.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0;

  img {
    height: 186px;
  }
}

.body {
  height: 100%;
  width: 100%;
}

.bg-content {
  height: 100%;
  width: 100%;
  background: url('../../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;

  img {
    display: block;
    margin: 0 auto;
  }

  .logo {
    position: absolute;
    top: 57px;
    right: 58px;
  }

  .title {
    margin-top: 90px;
    width: 480px;
    height: 112px;
  }

  .time {
    margin-top: 20px;
    width: 515px;
    height: 230px;
  }

  .location {
    margin-top: 20px;
  }

  .start {
    margin-top: 35px;
    width: 629px;
    height: 151px;
  }
}

.lottery-box {
  height: 100%;
  width: 100%;
  background: url('../../assets/images/lottery/bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;

  .box-bg {
    width: 1240px;
    height: 686px;
    padding: 0 40px;
    display: block;
    margin: 0 auto;
  }

  .box {
    position: absolute;
    width: 731px;
    height: 360px;
    top: 247px;
    left: 50%;
    transform: translate(-50%, 0);
    box-sizing: border-box;
    -webkit-box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
  }
}

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 236px;
  height: 123px;
  position: absolute;
  background: url('../../assets/images/lottery/box.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
}

/* 抽奖过程中选定样式 */
.list.change_in {
  background: url('../../assets/images/lottery/box-active.png') no-repeat;
  background-size: 100% 100%;
}

.list_t img {
  height: 93px;
}

/* 根据TOP */
.list:nth-child(1) {
  left: 50%;
  top: 50%;
  color: #fff;
  background: url('../../assets/images/lottery/start.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 222px;
  height: 107px;
  cursor: pointer;
}

.list.grey:nth-child(1) {
  background-color: #9c9c9c;
}

.list:nth-child(2), .list:nth-child(3), .list:nth-child(4) {
  top: 0;
}

.list:nth-child(6), .list:nth-child(7), .list:nth-child(8) {
  bottom: 0;
}

.list:nth-child(5), .list:nth-child(9) {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* 根据LEFT */
.list:nth-child(2), .list:nth-child(8), .list:nth-child(9) {
  left: 0;
}

.list:nth-child(3), .list:nth-child(7) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.list:nth-child(4), .list:nth-child(5), .list:nth-child(6) {
  right: 0;
}

div.text img {
  height: 33px !important;
}

.filter {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.tip-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

.tip-message {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
}

.tip-message img {
  width: 424px;
  height: 291px;
  z-index: 99;
}

.return-btn {
  width: 312px;
  height: 72px;
  position: absolute;
  top: 416px;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
}

.more-btn {
  width: 611px;
  height: 73px;
  position: absolute;
  top: 545px;
  left: 50%;
  transform: translate(-50%, 0);
}

.from-content {
  position: absolute;
  top: 80px;
  width: 1317px;
  height: 770px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

.form-bg {
  width: 1053px;
  height: 616px;
}

.hidden {
  overflow: hidden;
}
</style>